HTML@4嵌入资源标签 - Jiacheng Pan's Blog

常用标签

嵌入资源标签

图片 `img`

提示：img 是没有闭合标签的，也就是没有</img>。
img 标签有很多属性，简单介绍几个，具体可以去 W3School【HTML img 标签】

src 属性：
绝对地址指的就是这张图片的地址，可以直接将这个地址复制到浏览器中打开这张图。
相对地址指的是，这张图相对于这个 HTML 文档的地址。
比如文档结构是这样的：

在”blog - 副本”文件夹下，有 img 文件夹和一个 index.html 文件，index.html 文件需要访问到 img 文件夹中的 icon.png 文件时，应该写<img src="img/icon.png">
又假如，你需要访问到上级文件夹，此时文件结构是这样的：

你需要在 index.html 中访问 icon.png 文件，则要写成这样<img src="../icon.png">，要访问上级的上级的文档则需要写src="../../"，以此类推。
alt 属性：如果 src 中的图片无法显示，alt 就会替代该图片显示。

1	<img src="http://jackie-anxis.com/img/avatar.png" alt="封面">

width&height 属性：用来规定图片大小。可以有两种单位，%和 px（像素）。
%也就是相对父元素的大小。px 就是像素，也就是绝对大小。

1
2
3

<div style="background-color:orange; width: 300px; height: 300px;">
	<img src="../icon.png" width="50%">
</div>

显然这个 50%指的是父元素的 50%。

页面 `iframe`

也就是在页面中嵌入另一个页面，假如说我在 google 的搜索页<body>中添加一段

1	<iframe src="www.google.com"></iframe>

就能嵌入一个页面。

当然这是 iframe 标签最基础的功能，iframe 标签还可以用来做很多强大的事。而且它还有很多属性，可以访问【HTML iframe 标签】和【深入理解 iframe】（后面一篇可能需要有点 JS 基础）。

插件 `object` `embed` `video` `audio` `canvas` `svg` `map` area

这些都是用来嵌入一些插件的，但有些比较有难度，我只讲一些比较简单的，其他的，我会给出链接，你们可以参考别人的博客来帮助学习，我的观点是：这些标签你只要懂的它们的作用即可，而具体如何使用可以查看资料。
<object>标签
object 标签可以用来嵌入一些插件（除了图片以外的多媒体），比如 Flash,Java Applets,MP3,QuickTime Movies 等。基本上主流浏览器都支持 object 标签的实现，故而 object 可以完全代替标准不赞成使用的 applet,embed,bgsound 标签。大概写法如下：

<object type="application/x-shockwave-flash">
<param name="movie" value="http://pdfReader.swf">
<!--播放器地址可以写进value中-->
    <param name="flashvars" value="http://book.pdf">
</object>

其中，当 object 元素没有显示的时候，<object></object>之间的代码就会被执行。具体我也不再赘述，可以参考HTML object 标签(梦之园)，HTML object 标签(大肥子猪)

<embed>标签
这个标签和 object 功能类似，但是<embed>标签是 HMTL5 推出的新特性。同样不支持嵌入图片媒体，不赞成使用这个标签，因为它有很多毛病，也不符合网页设计理念，对旧的浏览器也不支持。

<video>标签
用来加载视频资源，也是 HTML5 新支持的标签，和<img>标签类似，可以非常便捷的引入资源。
写法大概是：

1
2
3

<video src="media/butterfly.mp4" controls>
	您的浏览器不支持 video 标签。
</video>

src 是视频的路径，controls 表示显示视频播放控件，默认是不显示的。标签之间的文字会出现在不支持 video 标签的浏览器中，作为后备内容出现，用来兼容不支持 video 标签的浏览器。具体属性可以查看HTML video 标签

<audio>标签
基本和 video 属性一致，不再赘述。要了解详细信息可以看：HTML audio 标签

<canvas>标签
可以用嵌入的脚本来绘制图形，后面讲 JS 的时候会提到，然后这里就简单贴一段代码，可以看看它是怎么工作的。

<canvas id="myCanvas">
	your browser does not support the canvas tag
</canvas>
<script type="text/javascript">
	var canvas=document.getElementById('myCanvas');//找到canvas标签
	var ctx=canvas.getContext('2d');//制定绘图模式是2d
	ctx.fillStyle='#FF0000';//填充颜色
	ctx.fillRect(0,0,80,100);//绘制长方形，参数是左上角和右下角的坐标
</script>

结果如下：

详情：HTML canvas 标签

<map>和<area>标签
这两个标签要配合使用，area 标签永远嵌套在 map 标签中，可以用来映射图像区域。

<img src="https://jackie-image.oss-cn-hangzhou.aliyuncs.com/16-8-10/88534460.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
	<area shape="rect" coords="0,0,123,62" href="https://www.baidu.com" target ="_blank" alt="Mercury" />
	<area shape="circle" coords="166,38,30" href ="https://www.google.com" target ="_blank" alt="Sun" />
</map>

效果可以直接点击试试看：
Planets

具体参考：HTML map 标签

常用标签

嵌入资源标签

图片 img

页面 iframe

插件 object embed video audio canvas svg map area

图片 `img`

页面 `iframe`

插件 `object` `embed` `video` `audio` `canvas` `svg` `map` area